<template>
  <div class="content g-mt10">
    <div class="current-bar">
      <Breadcrumb class="current-bar">
        <BreadcrumbItem to="/">
          <Icon type="ios-home-outline"></Icon>
          Home
        </BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">
          <Icon type="social-buffer-outline"></Icon>
          Components
        </BreadcrumbItem>
        <BreadcrumbItem>
          <Icon type="pound"></Icon>
          Breadcrumb
        </BreadcrumbItem>
      </Breadcrumb>
    </div>

    <slot name="tag">

    </slot>

    <slot name="list">

    </slot>

    <slot name="loading-more">

    </slot>

    <div class="loading-wrap" v-show="!loading">
      <loading></loading>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Loading from 'base/loading/loading'

  export default {
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      current: {
        type: Object,
        default: {}
      }
    },
    components: {
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .content
    min-height: 800px
    padding-bottom: 80px
    .current-bar
      padding: 10px 0
  .loading-wrap
    ltposition(0, 10px)
    wh(100%, 100%)
    background-color: rgba(0,0,0,.4)
</style>